<template>
    <div class="renyuan-bg">
        <div class="renyuan-title">
            质量问题看板
        </div>
        <GisplusTitle></GisplusTitle>
        <div class="renyuan-box-left flex-column-center">
            <div class="renyuan-box1 renyuan-box">
                <div class="renyuan-box-title">分部统计</div>
                <div style="display: flex;justify-content: space-around">
                    <echarts id="echartsqua" :option="dept_data" :styles="styles"></echarts>
                </div>
            </div>
            <div class="renyuan-box2 renyuan-box">
                <div class="renyuan-box-title">隐患分布</div>
                <div style="display: flex;justify-content: space-around">
                    <echarts id="echartslei" :option="yhfb_data" :styles="styles"></echarts>
                </div>
            </div>
        </div>
        <div class="renyuan-box-mid flex-column-center">
            <div class="renyuan-box3 renyuan-box">
                <div class="renyuan-box-title">隐患趋势图</div>
                <echarts id="qushi" :option="yhqs_data" :styles="styles2"></echarts>

            </div>
            <div class="renyuan-box4">
                <div class="renyuan-box-title" style="width: 0.5rem;padding: 0;text-align: center">整<br>改<br>统<br>计
                </div>
                <div class="renyuan-box">
                    <echarts id="tongji" :option="zgtj_data" :styles="styles3"></echarts>
                </div>
            </div>
        </div>
        <div class="renyuan-box-right flex-column-center">
            <div class="renyuan-box5 renyuan-box">
                <div class="renyuan-box-title">状态统计</div>
                <div class="gis-table">
                    <div class="gis-table-title">
                        <span style="display:inline-block;width: 10%;">序号</span>
                        <span style="display:inline-block;width: 20%;">专业类型</span>
                        <span style="display:inline-block;width: 20%;">发布时间</span>
                        <span style="display:inline-block;width: 18%;">发起人</span>
                        <span style="display:inline-block;width: 18%;">负责人</span>
                        <span style="display:inline-block;width: 14%;">状态</span>
                    </div>
                    <table>
                        <tbody class="u_scrollBar">
                        <tr v-for="(p,index) in zlwttj.list" :key="index">
                            <td style="width: 10%;">{{index+1}}</td>
                            <td style="width: 20%;">{{p.category}}</td>
                            <td style="width: 20%;">{{p.create_time}}</td>
                            <td style="width: 18%;">{{p.create_name}}</td>
                            <td style="width: 18%;">{{p.responssible_name}}</td>
                            <td style="width: 14%;">{{p.xz_status|wentiState}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :page-size="pageConfig.pageSize"
                                :total="zlwttj.total"
                                :current-page="pageConfig.pageNum"
                                @current-change="currentChange"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue'
  import GisplusTitle from '@/components/gisplus/GisplusTitle.vue'

  export default {
    name: 'qualitis',
    data () {
      return {
        dept: {
          dept1: 0,
          dept2: 0,
          dept3: 0,
          dept4: 0,
          zongbao: 0
        },
        yhfb: {
          jiaoan: 0,
          jidian: 0,
          luji: 0,
          lumian: 0,
          qiaoliang: 0,
          qita: 0,
          suidao: 0,
        },
        yhqs: {
          month: [],
          sumCount: [],
          untreatedCount: []
        },
        zgtj: {
          overdue: 0,
          processed: 0,
          sum: 1,
          untreated: 1
        },
        styles: {
          width: '3rem',
          height: '3rem',
          margin: '0 auto'
        },
        option2: {
          color: ['#5793f3', '#d14a61', '#675bba'],
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            },
          },
          legend: {
            data: ['发现隐患', '未消除隐患'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#5793f3'
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return '未消除隐患  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: ['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12']
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#d14a61'
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return '发现隐患  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: ['2019-1', '2019-2', '2019-3', '2019-4', '2019-5', '2019-6', '2019-7', '2019-8', '2019-9', '2019-10', '2019-11', '2019-12']
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff',
                }
              },
              axisPointer: {
                label: {
                  color: '#000'
                }
              }
            }
          ],
          series: [
            {
              name: '发现隐患',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(87, 147, 243, 0.5)'
                      }, {
                        offset: 0.8,
                        color: 'rgba(87, 147, 243, 0)'
                      }],
                    global: false // 缺省为 false
                  },
                  shadowColor: 'rgba(87, 147, 243, 0.2)',
                  shadowBlur: 10
                }
              },
              data: [3, 4, 6, 20, 28.7, 70.7, 75.6, 82.2, 85.7, 92, 95, 100]
            },
            {
              name: '未消除隐患',
              type: 'line',
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(209, 74, 97, 0.5)'
                      }, {
                        offset: 0.8,
                        color: 'rgba(209, 74, 97, 0)'
                      }],
                    global: false // 缺省为 false
                  },
                  shadowColor: 'rgba(0, 0, 0, 0.2)',
                  shadowBlur: 10
                }
              },
              data: [3.9, 5.9, 11.1, 18.7, 48.3, 20.2, 75.6, 88, 90, 91, 95, 99]
            }
          ]
        },
        styles2: {
          width: '7rem',
          height: '3.5rem',
          margin: '0 auto'
        },
        styles3: {
          width: '7rem',
          height: '3.5rem',
          margin: '0 auto'

        },
        zlwttj: {},
        pageConfig: {
          pageNum: 1,
          pageSize: 15,
        }
      }
    },
    components: {
      echarts, GisplusTitle
    },
    mounted () {
      this.getZlwt()
      this.getZlwtList('zlwt')
    },
    computed: {
      //分部统计
      dept_data () {
        return {
          color: ['#00ff00', '#fff500', '#ff0043', '#a500ff', '#0041ff'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            top: '10%',
            data: ['一分部', '二分部', '三分部', '四分部', '总包'],
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '隐患分布',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: this.dept.dept1, name: '一分部'},
                {value: this.dept.dept2, name: '二分部'},
                {value: this.dept.dept3, name: '三分部'},
                {value: this.dept.dept4, name: '四分部'},
                {value: this.dept.zongbao, name: '总包'},
              ]
            }
          ]
        }
      },
      // 隐患分布
      yhfb_data () {
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c}'
          },
          radar: [
            {
              indicator: [
                {text: '路基', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '桥梁', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '隧道', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '路面', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '交安', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '机电', max: Math.max.apply(null, this.yhfb.sum), min: 0},
                {text: '其他', max: Math.max.apply(null, this.yhfb.sum), min: 0},
              ],
              center: ['50%', '50%'],
              radius: 100,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              name: {
                formatter: '{value}',
                textStyle: {
                  color: '#fff349',
                  fontSize: 18
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['rgba(114, 172, 209, 0.2)',
                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                  shadowColor: 'rgba(0, 0, 0, 0.3)',
                  shadowBlur: 10
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              }
            },
          ],
          series: [
            {
              name: '问题汇总',
              type: 'radar',
              itemStyle: {
                emphasis: {
                  // color: 各异,
                  lineStyle: {
                    width: 4
                  }
                }
              },
              data: [
                {
                  value: this.yhfb.sum,
                  name: '问题汇总',
                  symbol: 'rect',
                  symbolSize: 5,
                  lineStyle: {
                    normal: {
                      // type: 'dashed'
                    },
                  }
                },
              ]
            },
          ]
        }
      },
      // 隐患趋势
      yhqs_data () {
        return {
          color: ['#5793f3', '#d14a61', '#675bba'],
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross',
              snap: true
            },
          },
          legend: {
            data: ['发现隐患', '未消除隐患'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: 70,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#d14a61'
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return '未消除隐患  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: this.yhqs.month
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#5793f3'

                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return '发现隐患  ' + params.value
                      + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                  }
                }
              },
              data: this.yhqs.month
            }
          ],
          yAxis: [
            {
              minInterval: 1,
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff',
                }
              },
              axisPointer: {
                label: {
                  color: '#000'
                }
              },
            }
          ],
          series: [
            {
              name: '发现隐患',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(87, 147, 243, 0.5)'
                      }, {
                        offset: 0.8,
                        color: 'rgba(87, 147, 243, 0)'
                      }],
                    global: false // 缺省为 false
                  },
                  shadowColor: 'rgba(87, 147, 243, 0.2)',
                  shadowBlur: 10
                }
              },
              data: this.yhqs.sumCount
            },
            {
              name: '未消除隐患',
              type: 'line',
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(209, 74, 97, 0.5)'
                      }, {
                        offset: 0.8,
                        color: 'rgba(209, 74, 97, 0)'
                      }],
                    global: false // 缺省为 false
                  },
                  shadowColor: 'rgba(0, 0, 0, 0.2)',
                  shadowBlur: 10
                }
              },
              data: this.yhqs.untreatedCount
            }
          ]
        }
      },
      //整改统计
      zgtj_data () {
        return {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          yAxis: {
            type: 'category',
            data: ['总数', '已整改', '未整改', '逾期'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
          },
          series: [
            {
              data: [
                {itemStyle: {color: '#00f7ff'}, value: this.zgtj.sum},
                {itemStyle: {color: '#0eff00'}, value: this.zgtj.processed},
                {itemStyle: {color: '#ff4600'}, value: this.zgtj.untreated},
                {itemStyle: {color: '#ff00cc'}, value: this.zgtj.overdue}
              ],
              type: 'bar',
              color: '#fff'
            },
          ]
        }
      }
    },
    methods: {
      getZlwt () {
        const that = this
        return that.request.getZlwt().then(function (response) {
            let zlwt = response.content
            console.log(zlwt)
            that.dept = zlwt.dept
            that.yhfb = zlwt.yhfb
            console.log(that.yhfb)
            that.yhqs = zlwt.yhqs
            that.zgtj = zlwt.zgtj
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },
      getZlwtList (type) {
        const that = this
        let params = {
          pageNum: that.pageConfig.pageNum,
          pageSize: that.pageConfig.pageSize,
          type: type
        }
        return that.request.getZlwtList(params).then(function (response) {
            that.zlwttj = response.content
            console.log(that.zlwttj)
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },
      currentChange (val) {
        console.log(val)
        this.pageConfig.pageNum = val
        this.getZlwtList('zlwt')
      }
    }
  }
</script>

<style scoped lang="scss">
    .renyuan-bg {
        width: 100%;
        padding: 1.2rem 0.5rem 0.5rem;
        background-image: url('../../assets/img/renyuan-bg.png');
        display: flex;
        justify-content: space-between;

        .renyuan-box-left {
            width: 3.5rem;
        }

        .renyuan-box-mid {
            width: 8rem;
        }

        .renyuan-box-right {
            width: 6rem;
        }
    }

    .renyuan-box {
        background-image: url('../../assets/img/renyuan-box.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .renyuan-box1 {
        width: 100%;
        flex: 3;
    }

    .renyuan-box2 {
        width: 100%;
        flex: 2;
        margin-top: 0.1rem;
    }

    .renyuan-box3 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box4 {
        width: 100%;
        flex: 1;
        margin-top: 0.1rem;
        display: flex;
    }

    .renyuan-box5 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box-title {
        font-size: 0.18rem;
        padding-left: 0.2rem;
        padding-top: 0.1rem;
        font-weight: bold;
        color: #5AC8FA;
        margin-bottom: 0.2rem;
    }

    .gis-table {
        width: 100%;
        height: calc(100vh - 2.5rem);
        overflow: hidden;
        position: relative;
        .gis-table-title {
            width: 100%;
            background: rgba(235, 235, 235, 0.1);
            line-height: 0.4rem;
            color: #5AC8FA;
            text-align: center;
        }
        table {
            width: 100%;
            font-size: 0.16rem;
            color: #5AC8FA;
            text-align: center;
            border: none;
            border-spacing: 0;
            line-height: 0.4rem;
            tbody {
                width: 100%;
                color: #a0acfa;
                tr:nth-child(2n) {
                    background: rgba(235, 235, 235, 0.1);
                }
            }
        }
    }

    .renyuan-img {
        position: relative;

        img {
            display: block;
            margin: 0 auto;
            width: 1.5rem;
            height: 1.5rem;
        }

        .renyuan-num {
            width: 0.5rem;
            font-size: 0.5rem;
            color: #fff;
            position: absolute;
            top: 10%;
            left: 0;
            right: 0;
            margin: 0 auto;
            font-family: Agency FB;
        }

        .renyuan-text {
            width: 1.20rem;
            font-size: 0.20rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
        }
    }

    .pagination {
        position: absolute;
        bottom: 0.1rem;
        width: 100%;
        text-align: center;
    }
</style>
